<script type="text/javascript">
	dojo.require("dijit.form.Button");
	dojo.require("dijit.Dialog");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.form.ValidationTextBox");
</script>

<div style="width:100%">
    <form method="POST" name="updateform" id="updateform">
        <select name="branch_number" id="branch_number" jsId="branch_number" size="1" onchange="getCaterersAndMenusForSelectedBranch()">
        <?php
        foreach( $this->branches as $branch )
        {
        	$value = $branch['branch_number'];
        	$label = $branch['name'];
            if($value==$this->current_branch)
                echo "<option SELECTED value=\"$value\">$label</option>";
            else
                echo "<option value=\"$value\">$label</option>";
        }
        ?>
        </select>
        <input type="hidden" name="caterersXML" id="caterersXML">
    </form>

    </div>

        <!-- caterer form -->
        <div dojoType="dijit.Dialog" id="catererForm" 
        title="Please enter Caterer's contact information" 
        style="display:none;opacity:100" 
        execute="validateCaterer()" 
        class="vendorForm">
            <table cellspacing="6">
                <tr>
                    <td><label for="caterer_name">Name: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text" required="true" name="caterer_name" id="caterer_name"></td>
                </tr>
                <tr>
                    <td><label for="caterer_address">Address: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text" required="true" name="caterer_address" id="caterer_address"></td>
                </tr>
                <tr>
                    <td><label for="caterer_city">City: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text" required="true" name="caterer_city" id="caterer_city"></td>
                </tr>
                <tr>
                    <td><label for="caterer_state">State: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text" 
                    	required="true" name="caterer_state" id="caterer_state"></td>
                </tr>
                <tr>
                    <td><label for="caterer_zip">Zip: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox 
                    	required="true" 
                    	regExp="\d{5}" 
                    	invalidMessage="Zip code does not match the <br>required format of NNNNN." 
                    	type="text" required="true" name="caterer_zip" id="caterer_zip"></td>
                </tr>
                <tr>
                    <td><label for="caterer_phone">Phone: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text" 
                    	required="true" 
                    	regExp="\(\d{3}\) \d{3}-\d{4}" 
                    	invalidMessage="Phone number does not match the<br>required format of (NNN) NNN-NNNN." 
                    	name="caterer_phone" id="caterer_phone"></td>
                </tr>
                <tr>
                    <td><label for="caterer_fax">Fax: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text" 
                    	name="caterer_fax" 
                    	regExp="\(\d{3}\) \d{3}-\d{4}" 
                    	invalidMessage="Fax number does not match the<br>required format of (NNN) NNN-NNNN." 
                    	id="caterer_fax"></td>
                </tr>
                <tr>
                    <td><label for="caterer_email">Email: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text"
                    	regExp="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"
                    	invalidMessage="Email address supplied must be of the form 'xxx@yyy.zz'"
                    	name="caterer_email" id="caterer_email"></td>
                </tr>                
                <tr>
                    <td colspan="2" align="center">
                        <button dojoType=dijit.form.Button type="submit"
                            onClick="return dijit.byId('catererForm').isValid();">OK</button>
                    </td>
                </tr>
            </table>
        </div>

        <!-- menu form -->
        <div dojoType="dijit.Dialog"
             id="menuForm" title="Menu"
             style="display:none;opacity:100"
            execute="" class="vendorForm">
            <table cellspacing="6">
                <tr>
                    <td><label for="menu_name">Name: </label></td>
                    <td><input dojoType=dijit.form.TextBox type="text" required="true" name="menu_name" id="menu_name"></td>
                </tr>
                <tr>
                    <td><label for="menu_description">Description: </label></td>
                    <td>
                        <input dojoType=dijit.form.TextBox required="true" name="menu_description" id="menu_description">
                    </td>
                </tr>
                <tr>
                    <td><label for="menu_units">Rate Type: </label></td>
                    <td>
                        <select dojoType=dijit.form.FilteringSelect
                                autocomplete="false" type="text" required="true" name="menu_units" id="menu_units">
                            <option value="">select one</option>
                            <option value="person">per person</option>
                            <option value="event">per event</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="menu_cost">Cost: </label></td>
                    <td><input dojoType="dijit.form.ValidationTextBox" 
                    		type="text" 
                    		required="true"
                    		regExp="^[0-9]+\.[0-9]{1,2}$" 
                    		name="menu_cost" 
                    		id="menu_cost"><br><span style="font-size:10px;padding-right:90px;">Example: 24.00</span></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button dojoType=dijit.form.Button type="submit"
                            onClick="return dijit.byId('menuForm').isValid();">OK</button>
                    </td>
                </tr>
            </table>
        </div>
        
    <div id="caterersDiv" class="vendorDiv">
        <p>Caterers</p>
        <table id="caterersGrid" jsId="dCaterersGrid" dojoType="dojox.grid.DataGrid"
               query="{ id: '*' }" store="caterersStore" class="vendorGrid">
            <thead>
                <tr>
                    <th field="id" hidden="true">ID</th>
                    <!-- ahh.  to apply a style to the cells in a column, add class='className'-->
                    <th field="namecell" width="50%" class="class1">Caterer</th>
                    <th field="loccell" width="50%" class="class1">Location</th>
                </tr>
            </thead>
        </table>
        <div class="gridButtons">
            <button id="btnNewCaterer"
                    jsId="btnNewCaterer"
                    dojoType="dijit.form.Button"
                    onClick='newCaterer'
                    style='font-size:9pt;float:right'>New</button>
            <button id="btnEditCaterer"
                    jsId="btnEditCaterer"
                    dojoType="dijit.form.Button"
                    onClick='editCaterer'
                    style='font-size:9pt;float:right'>Edit</button>
            <button id="btnDeleteCaterer"
                    jsId="btnDelCaterer"
                    dojoType="dijit.form.Button"
                    onClick='removeCaterer'
                    style='font-size:9pt;float:right'>Remove</button>
        </div>
    </div>
        <br><br>
    <div id="menusDiv" class="vendorDiv">
        <p>Menus</p>
        <table id="menusGrid" jsId="dMenusGrid" dojoType="dojox.grid.DataGrid"
               query="{ id: '*' }" store="menusStore" class="vendorGrid">
            <thead>
                <tr>
                    <th field="namecell" width="50%" class="class1">Menu</th>
                    <th field="pricecell" width="50%" class="class1">Price</th>
                </tr>
            </thead>
        </table>
        <div class="gridButtons">
            <button id="btnNewMenu"
                    jsId="btnNewMenu"
                    dojoType="dijit.form.Button"
                    onClick='newMenu'
                    style='font-size:9pt;float:right'>New</button>
            <button id="btnEditMenu"
                    jsId="btnEditMenu"
                    dojoType="dijit.form.Button"
                    onClick='editMenu'
                    style='font-size:9pt;float:right'>Edit</button>
            <button id="btnDeleteMenu"
                    jsId="btnDelMenu"
                    dojoType="dijit.form.Button"
                    onClick='removeMenu'
                    style='font-size:9pt;float:right'>Remove</button>
        </div>
    </div>
<p style="text-align: center; padding-top: 10px;"><button onclick="saveCaterersAndMenusForSelectedBranch()"> Save Changes </button></p>
